<template>
	<div class="hl">
		<div class="dl">
			<div class="dlLeft">
				<a href="">
					<img class="dlImg" src="@/assets/img/NewGood/img3.webp" alt="" />
				</a>
				<div class="dltest">
					<div class="rcmdInfo">
						肉嫩多汁似果冻
						<div class="rcmdInfoBottom"></div>
					</div>
					<a href="">
						<div class="orange">可吸着吃的网红橙，爱媛果冻橙 5斤</div>
					</a>
					<div>
						<span class="dlspan1">¥45.8</span>
						<span class="dlspan2">¥69</span>
					</div>
				</div>
			</div>
		</div>
		<div class="dl">
			<div class="dlLeft">
				<a href="">
					<img class="dlImg" src="@/assets/img/NewGood/img3.webp" alt="" />
				</a>
				<div class="dltest">
					<div class="rcmdInfo">
						肉嫩多汁似果冻
						<div class="rcmdInfoBottom"></div>
					</div>
					<a href="">
						<div class="orange">可吸着吃的网红橙，爱媛果冻橙 5斤</div>
					</a>
					<div>
						<span class="dlspan1">¥45.8</span>
						<span class="dlspan2">¥69</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.dl {
	width: 540px;
	background: #fff;
	padding: 10px 0;
	margin-bottom: 10px;
	.dlLeft {
		display: flex;
		height: 200px;
		.dlImg {
			width: 200px;
			height: 200px;
		}
		.dltest {
			font-size: 18px;
			color: #333;
			a {
				text-decoration: none;
			}
			.orange {
				margin: 10px 0 20px;
			}
			.orange:hover {
				color: #b4a078;
			}
			.rcmdInfo {
				margin-top: 40px;
				position: relative;
				width: 158px;
				padding: 8px 10px;
				border: 1px solid #ddd;
				color: #999;
				background: #fff;
				font-size: 14px;
				.rcmdInfoBottom {
					position: absolute;
					left: -1px;
					bottom: -7px;
					border: 8px solid #ddd;
					border-color: transparent transparent transparent #fff;
				}
			}
			.dlspan1 {
				font-size: 24px;
				color: #c34b4b;
				margin-right: 10px;
			}
			.dlspan2 {
				text-decoration: line-through;
				color: #999;
			}
		}
	}
}
</style>
